<template>
  <div class="fullscreen icon_full">
    <i :class="`iconfont ${isFullscreen ? 'icon-exitfullscreen' : 'icon-fullscreen'} toolBar-icon`" @click="toggle"></i>
  </div>
</template>

<script setup lang="ts">
import { useFullscreen } from "@vueuse/core";
const { toggle, isFullscreen } = useFullscreen();
</script>

<script lang="ts">
export default {
  name: 'Fullscreen'
};
</script>

<style scoped lang="scss">
.icon_full {
  cursor: pointer;
}

.toolBar-icon {
  cursor: pointer;
  font-size: 18px !important;
  color: var(--el-text-color-primary) !important;
  transition: color 0.3s;
}

.toolBar-icon:hover {
  color: var(--el-color-primary) !important;
}
</style>
